<template>
  <div class="searchBox">
    <ul class="">
      <li>
        <el-link :underline="false">国产剧</el-link>
      </li>
      <li>
        <el-link :underline="false">美剧</el-link>
      </li>
      <li>
        <el-link :underline="false">日剧</el-link>
      </li>
      <li>
        <el-link :underline="false">韩剧</el-link>
      </li>
      <li>
        <el-link :underline="false">动漫</el-link>
      </li>
      <li>
        <el-link :underline="false">电影</el-link>
      </li>
    </ul>
    <el-form @submit.native.prevent>
      <el-form-item>
        <el-input
            type="text"
            placeholder="想找什么..."
            v-model="searchInput">
          <el-button slot="append" class="el-button--primary search-btn" icon="el-icon-search"
                     @click="searchSubmit"></el-button>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SearchBox",
  data() {
    return {
      searchInput: ''
    }
  },
  methods: {
    searchSubmit() {
      console.log("sss")
    }
  }
}
</script>

<style scoped>
.search-btn {
  color: #FFF !important;
  background-color: #409EFF !important;
  border-color: #409EFF !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.searchBox {
  padding: 10px 60px;
  background-color: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

ul li {
  display: inline-block;
}

.searchBox ul {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.searchBox ul li a {
  font-size: 18px;
}
</style>